<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .one,.two,.three,.four{
            border: 1px solid #333;
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <com-a></com-a>
        <com-b></com-b>
    </div>
</body>
<script type="module">
    // 如何定义Vue组件?
    // 1. 局部组件   => 使用时才会注册
    // a. 先将组件的配置对象存储到变量中
    // b. 在需要的组件中,注册对应的组件 => components:{ 组件名: 组件配置} 
  

    // 特征: 
    // 使用时才会注册

    // 缺点:
    // 1. 组件之间的层级关系比较明确 => 只有被注册的组件,才能使用(先注册 在使用)
    // 2. 局部组件注册之后,如果不使用, 项目打包过程中会删除冗余代码 => webpack/vite(前端工程化工具)

    // 局部组件的配置对象


    import comA from "../comp/compA.js";
    import comB from "../comp/compB.js";

    // 根实例/组件/应用
    var vm = new Vue({
        el:"#app",
        data:{

        },
        components:{ // 在当前组件(根组件) 注册了两个子组件 (comA comB)
            // 键名 => 组件名
            // 键值 => 组件的配置对象 
            comA:comA,
            "com-b":comB,
        }
    })



</script>
</html>